<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .billboard {
            width: 200px;
            height: 400px;
            border: 1px solid black;
            border-radius: 3px;
            overflow: hidden;
            position: relative;
        }
        
        .content {
            position: absolute;
            width: 160px;
        }
    </style>
</head>

<body>
    <h1>公告栏</h1>
    <div class="billboard">
        <div class="content">
            根据金庸同名小说改编。南宋偏安，君臣昏聩 射雕英雄传 射雕英雄传 ，朝政日衰。大金国虎视眈眈，而蒙古雄鹰成吉思汗表面联宋伐金，但暗地则蕴酿着一统江山的野心。靖康之耻阴影下的中原江湖，武林至宝《武穆遗书》和《九阴真经》成为人们匡扶大宋江山、追求武学颠峰的寄托和目标。东邪、西毒、南帝、北丐四大绝世高人，以及全真派、丐帮等数大门派纷纷卷入其中......忠良之后、成吉思汗的“金刀驸马”少年郭靖承母命从蒙古草原南下寻找杀父仇人，他偶遇桃花岛主「东邪」黄药师的女儿黄蓉，两人一见倾心，结伴闯荡江湖，在聪慧机敏的黄蓉的扶助下，憨厚朴实的郭靖遍识天下高人，并拜得丐帮帮主「北丐」洪七公为师，得七公传授武林绝学「降龙十八掌」。在机缘巧合下，郭靖又得“九阴真经”与“武穆遗书”，卓然成为一代大侠和用兵大家，他在饱览南宋人民遭受的家国之苦后，立誓报国。这位昔日淳朴憨厚、木讷愚钝的射雕英雄终于成为上华山论剑、救襄阳国难、为国为民、充满浩然正气的英雄人物
        </div>
    </div>
    <input type="text" class="input1"><button class="btn">搜索</button>
    <input type="text" class="input2"><button class="btn1">搜索</button>
    <script>
        // 第一题
        function getMax(arr) {
            var max = arr[0];
            for (var i = 1; i < arr.length; i++) {
                arr[i] > max && (max = arr[i]);
            }
            return max;
        }
        console.log(getMax([10, 13, 14, 16, 9, 8]));
        // 第二题
        function getAdd(arry) {
            var temp = arry[0]
            for (var i = 1; i < arry.length; i++) {
                temp = arry[i] + temp;
            }
            return temp;
        }
        console.log(getAdd([5, 2, 6, 8, 9, 5]));

        // 第三题
        window.onload = function() {
                var inputcheck = document.querySelector(".input1");
                var Btn = document.querySelector(".btn");
                Btn.addEventListener("click", function(e) {
                    var value = inputcheck.value;
                    // var arr = value.split(" ");
                    // var temp = "";
                    // for (var i = 0; i < arr.length; i++) {
                    //     temp = temp + arr[i];
                    // }
                    // console.log(temp);
                    console.log(value);
                    var value = inputcheck.value;
                    while (value.charAt(0) != "" && value.charAt(0) == " ") {
                        value = value.slice(1);
                    }
                    while (value.length != 0 && value.charAt(value.length - 1) == " ") {
                        value = value.slice(value.length - 1);
                    }
                    console.log(value.length);
                })
            }
            // 第四题
        window.onload = function() {
            var inputcheck2 = document.querySelector(".input2");
            var Btn1 = document.querySelector(".btn1");
            Btn1.addEventListener("click", function(e) {
                var value = inputcheck2.value; //获取input输入的值

                var arr = value.split("@");
                if (arr.length != 2) {
                    alert("不是邮箱地址");
                    return;
                }

                if (arr[0] === "") {
                    alert("不是邮箱地址");
                    return;
                }
                var arr2 = arr[1].split(".");
                if (arr2.length != 2) {
                    alert("不是邮箱地址");
                    return;
                }

                if (arr2[0] === "") {
                    alert("不是邮箱地址");
                    return;
                }

                if (arr2[1] !== "com") {
                    alert("不是邮箱地址");
                    return;
                }
                alert("这是邮箱地址");
            })
        }
        //第五题
        window.onload = function() {
            var content = document.querySelector(".content");
            var top = 20;
            var height = content.scrollHeight;
            var timer = setInterval(function() {
                top = top + 10;
                if (top > height - 160) {
                    top = -400;
                }
                content.style.top = top + "px";
            }, 100);
        }
    </script>

</body>

</html>